<template>
    <div :class="cardItemClass" @click="click">
        <div class="card-base-info">
            <div class="card-name">
                <div class="name text-overflow">
                    <div v-if="level" class="level-value">LV.{{level}}</div>
                    <TechIcon v-else :name="`${isNormal || isDisable ? 'vip-gray' : 'vip'}`" :color="`${isNormal ? '#838A94' : '#8A6817'}`" />
                    {{name}}
                    <div v-if="isShopCard" class="shop-cart-tag">商城卡</div>
                </div>
                <div v-if="isDefault" class="is-default">本店常用卡</div>
            </div>
            <template v-if="discount !== 10">
                <div v-if="!isNormal" class="card-discount">{{discount}}<span>折</span></div>
            </template>
            <div v-if="!isNormal && isDisable" class="is-disable">本店不可用</div>
            <div v-if="isEntityCard" class="is-entity-card">在线实体卡</div>
        </div>
        <div v-if="!isNormal" class="card-detail-info">
            <div class="detail-item card-balance">
                <div class="item-name">余额</div>
                <div class="item-value">￥{{balance}}</div>
            </div>
            <div v-show="showTopUpLowerAmount && topUpLowerAmount" class="detail-item card-balance">
                <div class="item-name">起充金额</div>
                <div class="item-value">￥{{topUpLowerAmount}}</div>
            </div>
            <div v-if="haveIntegral" class="detail-item card-integral">
                <div class="item-name">积分</div>
                <div class="item-value">{{integral}}</div>
            </div>
        </div>
        <div v-else class="normal-tip">普通用户卡不打折，不可充值</div>
    </div>
</template>

<script>
import { Icon } from 'vant';
import { TechIcon } from '@components/base';
export default {
    name: 'MemberCard',
    components: {
        Icon,
        TechIcon,
    },
    computed: {
        cardItemClass() {
            const { isDisable, isNormal } = this.$props;
            return `tech-member-card ${isDisable ? 'card-disable' : ''} ${isNormal ? 'is-normal' : ''}`;
        },
        showIntegral() {
            const { integral } = this.$props;
            const isNumber = typeof integral === 'number';
            return isNumber ? true && integral : integral;
        },
    },
    props: {
        isDefault: Boolean,
        isDisable: Boolean,
        name: String,
        balance: Number,
        level: Number,
        discount: {
            type: Number,
            default: 10,
        },
        isNormal: {
            type: Boolean,
            default: false,
        },
        integral: {
            type: Number,
            default: 0,
        }, // 积分，传入数字则默认显示，传入布尔值，则判断是否显示
        haveIntegral: {
            type: Boolean,
            default: false,
        },
        cardId: [String, Number], // 唯一id，用于点击返回
        isEntityCard: {
            type: Boolean,
            default: false,
        },
        showTopUpLowerAmount: {
            type: Boolean,
            default: false,
        },
        topUpLowerAmount: {
            type: Number,
            default: 0,
        },
        isShopCard: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        click() {
            const { cardId, isDisable, isNormal } = this.$props;
            if (isDisable || isNormal) {
                return;
            }
            this.$emit('click', cardId);
        },
    },
};
</script>

<style lang="less" scoped>
    .tech-member-card {
        position: relative;
        overflow: hidden;
        .flex-column-between();
        background-image: url('../../../assets/img/member-card-default.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .p(@gap-lg);
        border-radius: @member-card-border-raduis;
        color: @card-color;
        min-height: 115px;
        &.card-disable, &.is-normal {
            background-image: url('../../../assets/img/member-card-disable.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            color: @gray-darker;
        }
        &.is-normal {
            color: @gray-444;
        }
        .normal-tip {
            .font-size();
            color: @gray-darker;
            z-index: 2;
            .t-r();
        }
        .card-base-info {
            .flex-row-between();
            z-index: 2;
            min-height: 65px;
            position: relative;
            .card-name {
                .name {
                    .font-size-md();
                    font-weight: @font-weight-bold;
                    .flex();
                    align-items: center;
                    // max-width: 200px;
                    .level-value {
                        .font-size-sm();
                        background-color: @black;
                        color: @white;
                        height: 20px;
                        border-radius: @gap;
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                        .p-l(@gap);
                        .p-r(@gap);
                        .m-l(-@gap-lg);
                        .m-r(@gap-sm);
                    }
                    .tech-icon {
                        .m-r(@gap-sm);
                    }
                }
                .is-default {
                    .p-h(@gap);
                    .font-size-sm();
                    .m-t(@gap-sm);
                    width: 65px;
                    height: 24px;
                    .t-c();
                    line-height: 24px;
                    background-color: #FDF8EE;
                    border-radius: 12px;
                    color: #B79C74;
                }
                .shop-cart-tag {
                    font-size: @font-size-mini;
                    color: rgba(0, 0, 0, 0.65);
                    width: 36px;
                    height: 16px;
                    background: #DBB9A2;
                    box-shadow: 1px 1px 0px 0px rgba(51, 51, 51, 0.26);
                    border-radius: 2px;
                    .flex-center();
                    .m-l(@gap);
                    opacity: .8;
                }
            }
            .card-discount {
                .font-size(34);
                > span {
                    .font-size();
                }
            }
            .is-disable {
                position: absolute;
                top: -20px;
                right: -20px;
                .font-size-mini();
                .red-linear-bg();
                color: @white;
                .p-h(@gap);
                border-bottom-left-radius: @member-card-border-raduis;
                .linear-right(@member-card-is-disable-tag-start-color, @member-card-is-disable-tag-end-color);
            }
            .is-entity-card {
                position: absolute;
                top: -20px;
                right: -20px;
                .font-size-mini();
                background-color: #C1A97E;
                color: @white;
                .p-h(@gap);
                border-bottom-left-radius: @member-card-border-raduis;
            }
        }
        .card-detail-info {
            .flex();
            z-index: 2;
            .detail-item {
                width: 90px;
                .m-r(@gap);
                .font-size();
                .item-name {
                    white-space: nowrap;
                    .m-b(@gap-sm);
                }
                .item-value {
                    .font-size();
                    font-weight: @font-weight-bold;
                }
            }
        }
    }
</style>
